<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>听音乐</title>
    <link rel="stylesheet" href="./css/base.css">
</head>
<body>
<div id="app">
    <!--搜索-->
    <div class="header-search">
        <input type="text" @input="search" placeholder="请输入要搜索的歌曲名称">
    </div>
    <div class="loading-wrap" v-show="list.length === 0">
        <div class="first-loading"></div>
        <div>加载中，请稍后</div>
    </div>
    <!--列表-->
    <div class="music-list">
        <div class="item"
             :class="{active: v.songid === playing.songid}"
             v-if="v.show"
             v-for="(v,index) in list"
             @click="toPlay(index)">
            <div class="title">
                <span class="index">{{index + 1}}.</span> {{v.title}}
            </div>
            <small class="user">{{v.author}}</small>
        </div>
    </div>
    <!--播放器-->
    <div class="player-wrap">
        <div class="player-item" v-if="playing">
            <div class="pic" @click="showModal"><img :src="playing.pic" alt=""></div>
            <audio controls ref="Audio" :src="playing.url"></audio>
        </div>
    </div>
    <!--歌曲详情-->
    <div class="modal player-info-wrap" v-show="show">
        <div class="modal-wrapper">
            <div class="modal-content" v-if="playing">
                <h2>{{playing.title}}</h2>
                <img class="info-img" :src="playing.pic" alt="">
                <div class="lrc" v-if="playing.lrcData">
                    <ol>
                        <li v-for="(v) in playing.lrcData">{{v}}</li>
                    </ol>
                </div>
                <button class="close" @click="show = false">×</button>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<!--<script src="./plugin/vue.min.js"></script>-->
<!--<script src="./plugin/axios.min.js"></script>-->
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script>
    function formatLrc(str) {
        let lrcObj = {}
        const regExp = /\[(\d{2}):(\d{2})\.(\d{2})\](.*)/g
        while (1) {
            let result = regExp.exec(str)
            if (result) {
                const time = (parseInt(result[1]) * 60) + (parseInt(result[2]))
                lrcObj[time] = result[4]
            } else {
                break
            }
        }
        for (let i in lrcObj) {
            if (!lrcObj[i]) {
                delete lrcObj[i]
            }
        }
        return lrcObj
    }

    new Vue({
        el: '#app',
        data: {
            list: [],
            playing: null,
            show: false,
        },
        created() {
        },
        async mounted() {
            this.getList()
        },
        methods: {
            // 显示歌词
            showModal() {
                this.show = true
                const id = this.playing.songid
                axios.get(`../system/musicLrc/${id}.json`).then(res => {
                    const src = formatLrc(res.data.lrc)
                    this.playing = Object.assign(this.playing, {lrcData: src})
                })
            },
            getList() {
                // https://gitee.com/jayMusic/jayMusic28/raw/master/003EosTG01e9bh.mp3
                const url = `../system/musicList.json?timestamp=${Date.now()}`
                axios.get(url).then(res => {
                    this.list = res.data.map(item => {
                        item.show = true
                        item.url = `http://jaymusic.gitee.io/jaymusic${item.path}`
                        return item
                    })
                    this.playing = Object.assign({lrcData: ''}, this.list[0])

                    // 播放完毕之后自动播放下一首
                    this.$nextTick(() => {
                        const audio = this.$refs.Audio
                        // 播放完毕
                        audio.onended = e => {
                            const playing = this.playing
                            let index = null
                            let len = this.list.length
                            this.list.forEach((item, i) => {
                                if (item.songid === playing.songid) {
                                    index = i
                                }
                            })
                            if (index + 1 === len) {
                                this.toPlay(0)
                            } else {
                                this.toPlay(index + 1)
                            }
                        }
                    })
                }).catch(e => {
                    console.log(e)
                })
            },
            toPlay(index) {
                const item = this.list[index]
                const audio = this.$refs.Audio
                item.lrcData = formatLrc(item.lrc)

                if (this.playing.songid === item.songid && !audio.paused) {
                    this.$nextTick(() => {
                        this.$refs.Audio.pause()
                    })
                } else {
                    this.playing = Object.assign({lrcData: ''}, item)
                    this.$nextTick(() => {
                        audio.play()
                    })
                }


            },
            search(e) {
                const val = e.target.value
                this.list.forEach(item => {
                    if (item.title.includes(val)) {
                        item.show = true
                    } else {
                        item.show = false
                    }
                })
            }
        }
    })

</script>
</body>
</html>
